var DetailItem = function () {
  var template = /* html */ `
    <div class="detail-item" v-loading.fullscreen.lock="loading">
      <div>
        <el-form inline label-width="auto">
          <el-form-item label="收/付款方:">
            <span>{{record.customerName}}</span>
          </el-form-item>
          <el-form-item label="收付款方式:">
            <span>{{record.receiptPaymentMode}}</span>
          </el-form-item>
          <el-form-item label="总额:">
            <span>{{record.sumMoney}}</span>
          </el-form-item>
          <el-form-item label="折算金额:">
            <span>{{record.conversionPrice}}</span>
          </el-form-item>
          <el-form-item label="银行卡号:">
            <span>{{record.relationBank}}</span>
          </el-form-item>
          <el-form-item label="所属银行:">
            <span>{{record.bank}}</span>
          </el-form-item>
        </el-form>
      </div>
      <el-table fit stripe border :data="detailList" style="width: 100%">
        <el-table-column label="订单编号" prop="warehouseInSumMoneyDetail.orderId" key="orderId" min-width="150px" header-align="center"></el-table-column>
        <el-table-column label="工厂型号" prop="warehouseInSumMoneyDetail.factoryNo" key="factoryNo" min-width="120px" header-align="center"></el-table-column>
        <el-table-column label="客户型号" prop="warehouseInSumMoneyDetail.coustomId" key="coustomId" min-width="120px" header-align="center"></el-table-column>
        <el-table-column label="物料类型" prop="warehouseInSumMoneyDetail.materialName" key="materialName" min-width="120px" header-align="center"></el-table-column>
        <el-table-column label="规格型号" prop="warehouseInSumMoneyDetail.model" key="model" min-width="120px" header-align="center"></el-table-column>
        <el-table-column label="编号" prop="warehouseInSumMoneyDetail.color" key="color" min-width="120px" header-align="center"></el-table-column>
        <el-table-column label="已收/已付" prop="price" key="price" min-width="120px" align="center"></el-table-column>
        <el-table-column :resizable="false" label="增减类型" prop="addReduceType" key="addReduceType" width="120px" align="center">
          <template slot-scope="scope">
            <span>{{i18n.getMsg('warehouseBalance.detail.addReduceType.'+scope.row.addReduceType)}}</span>
          </template>
        </el-table-column>
        <el-table-column label="增减金额" prop="addReducePrice" key="addReducePrice" min-width="120px" align="center">
          <template slot-scope="scope">
            <span v-if="scope.row.addReduceType!==0">{{scope.row.addReducePrice}}</span>
          </template>
        </el-table-column>
        <el-table-column label="增减原因" prop="addReduceReason" key="addReduceReason" min-width="180px" align="center">
          <template slot-scope="scope">
            <span v-if="scope.row.addReduceType!==0">{{scope.row.addReduceReason}}</span>
          </template>
        </el-table-column>
      </el-table>
    </div>
  `;

  return {
    props: {
      record: {
        type: Object,
        required: true
      }
    },

    data: function () {
      return {
        loading: false,
        detailList: []
      };
    },

    created: function () {
      this.setDetailList();
    },

    methods: {
      setDetailList: function () {
        var record = this.record;
        this.loading = true;
        var self = this;
        ajaxRequest('finance/getReceiptPaymentRecordByMainId', {
          receivePaymentId: record.receivePaymentId,
          source: record.source
        }).then(function (res) {
          var detailList = _.get(res, "[0].detailList");
          if (SysUtil.isEmpty(detailList)) {
            detailList = [];
          }

          self.detailList = detailList;
          self.loading = false;
        }).catch(function () {
          self.loading = false;
          if (record.source === 3) {
            self.$emit('close');
          }
        });
      }
    },

    template: template
  };
}();
